<template>
  <div class="list-page">
    <Row>
      <div class="toolbar">
        <router-link :to="{ path: '/benefits/add' }">
          <Button
            type="primary"
            icon="md-add"
            style="margin: 0 10px"
            v-if="Validation.check(Resources.BANNERS_ADD)"
          >新增权益
          </Button>
        </router-link>
      </div>
    </Row>
    <Row>
      <Table
        border
        :loading="bloc.loading"
        :columns="columns"
        highlight-row
        :data="bloc.paged.items"
      >
        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
            <Button
              size="small"
              @click="modifyItem(row)"
              v-if="
  Validation.check(Resources.BANNERS_UPDATE)
"
              type="info"
            >编辑
            </Button>
            <Button
              size="small"
              @click="removeItem(row)"
              v-if="
  Validation.check(Resources.BANNERS_DELETE)
"
              type="warning"
            >删除
            </Button>
          </div>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="(val) => bloc.load(val, bloc.paged.pageSize)"
            @on-page-size-change="(val) => bloc.load(bloc.paged.pageIndex, val)"
          />
        </slot>
      </Table>
    </Row>
  </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import { Route } from "vue-router";
    import { BenefitsBloc } from "@/view/benefits/BenefitsBloc";
    import { Benefits } from "@/base/model/Benefits";
    import { formatDate } from "@/base/util/Dates";
    import { Validation } from "@/base/Validation";
    import { Resources } from "@/base/Resources";



    const columns = (bloc: BenefitsBloc) => [
        {
            title: "权益图片",
            key: "benefitIcon",
            align: "left",
            width: 200,
            render: (h: any, params: any) => {
                return h("div", [
                    h("img", {
                        domProps: {
                            src: params.row.benefitIcon,
                        },
                        style: {
                            width: "50px",
                            height: "50px",
                        },
                    }),
                ]);
            },
            tooltip: true,
        },
        {
            title: "权益名称",
            key: "benefitname",
            align: "left",
            minWidth: 100,
            tooltip: true,
        },
        {
            title: "权益说明",
            key: "description",
            align: "left",
            minWidth: 100,
            tooltip: true,
        },
        {
            title: "最后修改时间",
            render: (h: any, params: any) => {
                return h("span", {
                    domProps: {
                        innerText: formatDate(
                            new Date(params.row.updatetime),
                            "yyyy-MM-dd hh:mm:ss"
                        ),
                    },
                });
            },
            width: 160,
            align: "left",
            tooltip: true,
        },
        {
            title: "操作",
            slot: "action",
            width: 200,
            align: "left",
            fixed: "right",
        },
    ];

    @Component
    export default class extends Vue {
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next((vm) => {
                vm.bloc
                    .load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize)
                    .catch((e) => {
                        vm.$Message.error("操作错误");
                    });
            });
        }
        bloc: BenefitsBloc = new BenefitsBloc();
        Validation = Validation;
        Resources = Resources;
        columns = columns(this.bloc);

        private row: any;
        removeItem(row) {
            this.row = row;
            this.$Modal.confirm({
                title: "提示",
                content: "确认删除后将无法恢复！还要继续吗？",
                okText: "删除",
                cancelText: "取消",
                onOk: () => {
                    this.bloc.removeItem(row)
                        .then((res) => {
                            if (res.name === '') {
                                this.$Message.success('删除成功');
                            } else {
                                this.$Message.error('删除失败');
                            }
                        }).finally(() => {
                        this.bloc.reset();
                    });
                },
            });
        }

        modifyItem(dataItem: Benefits) {
            this.$router.push({
                path:'/benefits/edit/'+dataItem.benefitId});
        }
    }

</script>

<style lang="less">
</style>
